<template>
  <div id="app" class="app" :class="`app-theme-${theme}`">
    <BrowserInfo v-if="isMSIE" />
    <template v-else>
      <router-view v-if="logined" />
      <Login v-else />
    </template>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import Login from "@/views/Login.vue";
import BrowserInfo from "@/components/BrowserInfo.vue";
import { namespace } from "vuex-class";
import moduleName from "@/store/";
import { Action } from "vuex";
const userModule = namespace("user");
const appModule = namespace("app");

@Component({ components: { Login, BrowserInfo } })
export default class App extends Vue {
  @userModule.State("logined") public logined!: boolean;
  @appModule.State("theme") public theme!: string;
  public isMSIE = false;

  @Watch("theme")
  public themeChange(newTheme: string) {
    document.body.setAttribute("data-theme", newTheme);
  }
  public created() {
    const win: any = window;
    if (!!win.ActiveXObject || "ActiveXObject" in window) {
      this.isMSIE = true;
    }
    document.body.setAttribute("data-theme", this.theme);
  }
}
</script>

<style lang="less">
@import url("./assets/less/index.less");
.app {
  height: 100%;
  width: 100%;
}
</style>
